<template>
  <div id="box">
    <p>{{time}}</p>
    <p>{{addNum}}</p>
    <p>{{count}}</p>
    <p>{{tab}}</p>
    <p>{{tab2}}</p>
    <p>{{tabFil}}</p>
    <p>{{tabFil2}}</p>
    <button @click="addFun">点击触发事件</button>
    <button @click="add(5)">点击触发事件</button>
    <button @click="add1">点击触发事件</button>
    <button @click="addCeShi">点击触发事件</button>
  </div>
</template>

<script>
import store from '../store/store.js'
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
  name: 'Login',
  store,
  data () {
    return {

    }
  },
  computed: {
    ...mapState({
      count: state => state.count,
      time: state => state.time
    }),
    ...mapGetters([
      'tabFil', 'tabFil2'
    ]),
    addNum () {
      return this.$store.state.count
    },
    tab () {
      return this.$store.getters.tabFil
    },
    tab2 () {
      return this.$store.getters.tabFil2
    }
  },
  mounted () {
    this.timeAct()
  },
  methods: {
    addFun () {
      this.$store.commit('add', 10)
    },
    ...mapMutations([
      'add'
    ]),
    ...mapActions([
      'add1', 'addCeShi', 'timeAct'
    ])
  }

}
</script>

<style scoped>
  #box {
    width: 100%;
    height: 500px;
    background: #ebd4d4;
  }
</style>
